import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
import { NzProgressModule } from 'ng-zorro-antd/progress';

@Component({
  selector: 'app-progress-step',
  standalone: true,
  imports: [NzProgressModule, NzInputNumberModule, FormsModule],
  template: `
    <div class="demo">
      <div>
        <nz-progress [nzPercent]="value"></nz-progress>
      </div>
      <div>
        <nz-progress
          [nzPercent]="value"
          [nzSteps]="steps"
          nzStrokeColor="#1890ff"
        ></nz-progress>
      </div>
      <div>
        <nz-input-number
          [nzMin]="0"
          [nzMax]="100"
          [nzStep]="5"
          [(ngModel)]="value"
        ></nz-input-number>

        <nz-input-number
          [nzMin]="0"
          [nzMax]="1000"
          [nzStep]="1"
          [(ngModel)]="steps"
        ></nz-input-number>
      </div>
    </div>
  `,
  styles: ``,
})
export class ProgressStepComponent {
  value = 50;
  steps = 3;
}
